<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <!-- BEGIN CORE CSS FRAMEWORK -->
        <link href="web/assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="web/assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="web/assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
        <link href="web/assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
        <link href="web/assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
        <!-- END CORE CSS FRAMEWORK -->
        <!-- BEGIN CSS TEMPLATE -->
        <link href="web/assets/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="web/assets/css/responsive.css" rel="stylesheet" type="text/css"/>
        <link href="web/assets/css/custom-icon-set.css" rel="stylesheet" type="text/css"/>
        <!-- END CSS TEMPLATE -->

        <title>Login</title>
    </head>
    <body class="error-body no-top lazy" > 
        <div class="container">
            <div class="row login-container animated fadeInUp">  
                <div class="col-md-5 col-md-offset-3 tiles white no-padding">
                    <div class="p-t-30 p-l-20 p-b-10 xs-p-t-20 xs-p-l-10 xs-p-b-10">                        
                        <img src="web/assets/img/logoSistema.png" />
                    </div>            
                    <div class="  col-md-12   "> <br>
                        <form id="formLogin"  class="animated fadeIn" action="fuentes/Seguridad.php" method="post">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label class="form-label">Usuario:</label>
                                    <div class="controls">
                                        <div class="input-with-icon  right">                                       
                                            <i class=""></i>
                                            <input type="text" name="usuario" id="usuario" placeholder="usuario"  class="form-control">                                 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label class="form-label">Contraseña:</label>
                                    <span class="help"></span>
                                    <div class="controls">
                                        <div class="input-with-icon  right">                                       
                                            <i class=""></i>
                                            <input type="password"  name="clave" id="clave" placeholder="contraseña" class="form-control">                                 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button class="btn btn-primary btn-cons pull-right" type="submit">Login</button>
                                </div>
                            </div>
                            <div id="result" ></div>
                        </form>
                    </div>


                </div>
            </div>
            <!-- END CONTAINER -->
            <!-- BEGIN CORE JS FRAMEWORK-->
            <script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
            <script src="web/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
            <script src="web/assets/plugins/pace/pace.min.js" type="text/javascript"></script>
            <script src="web/assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
            <script src="web/assets/js/login.js" type="text/javascript"></script>
            <!-- BEGIN CORE TEMPLATE JS -->
            <!-- END CORE TEMPLATE JS -->
            <script type='text/javascript'>



                $("#formLogin").submit(function(event) {
                    $.ajax({
                        type: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        // Mostramos un mensaje con la respuesta de PHP
                        success: function(data) {
                            $('#result').html(data);
                            // $("#formLogin")[0].reset();
                        }
                    });
                    return false;


                });

            </script>
    </body>
</html>

